<template>
  <UserVue></UserVue>
  <h2>mapState 映射的计算属性</h2>
  <ul>
    <li>年龄：{{ age }}</li>
    <li>等级：{{ level }}</li>
    <li>账号：{{ user_account }}</li>
    <li>昵称：{{ user_nickname }}</li>
  </ul>

  <button @click="age += 10">更改年龄</button>
  |
  <button @click="user_nickname += '='">更改昵称</button>

  <hr />
  <h2>mapWritableState 映射的计算属性</h2>

  <ul>
    <li>年龄：{{ user_age }}</li>
    <li>等级：{{ user_level }}</li>
    <li>账号：{{ account }}</li>
    <li>昵称：{{ nickname }}</li>
    <li>counter：{{ counter }}</li>
  </ul>

  <button @click="user_age += 10">更改年龄</button>
  |
  <button @click="nickname += '='">更改昵称</button>
</template>

<script setup>
import { useMainStore, useUserStore } from '@/stores/counter' // 是用全局中的stores目录中的counter.ts中定义的变量
import { storeToRefs } from 'pinia' // 使用pinia中的方法
import { computed } from 'vue'

const user_store = useUserStore() // 获取 UserStore 实例
const main_store = useMainStore() // 获取 UserStore 实例

// 通过 computed() 将 store 中 state 映射成当前组件中的计算属性，具有响应性，但是是只读的
const user_age = computed(() => user_store.age)
const user_level = computed(() => user_store.level)
const user_account = computed(() => user_store.account)
const user_nickname = computed(() => user_store.nickname)
// const counter = computed(() => main_store.counter)
const counter = main_store.counter

const {
  // storeToRefs 将 store 中 state 解构为组件的数据，具有响应性，还可以响应式修改
  age,
  level,
  account: userAccount,
  nickname: userNickname,
} = storeToRefs(user_store)
</script>
